extends layout
append scripts
    script.
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;  // 判断表单字段 (fname) 值是否存在, 如果存在, 则弹出信息, 否则阻止表单提交
            console.log(document.forms['myForm']);  // 会把整个 form 标签输出
            console.log(document.forms['myForm']['fname']);  // 会输出 fname 那行
            if (x == null || x == "") {
                alert("需要输入名字");
                return false;
            }
            var x = document.forms["myForm"]["email"].value;
            var atpos = x.indexOf("@");
            var dotpos = x.lastIndexOf(".");
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
                alert("不是一个有效的 e-mail 地址");
                return false;
            }
        }
block content
    //- 两种验证方法: onsubmit 和 required
    //- 填写并提交表单, 然后重新刷新页面查看如何自动填充内容
    //- input 三要素 type name value...
    form(name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post" autocomplete="on")
        //- autofocus 自动获取焦点; 表单字段 (fname1) 的值为空, required 属性会阻止表单提交
        | onsubmit: #[input(type="text" name="fname" autofocus="")] #[br]
        | Email:    #[input(type="text" name="email")]              #[br]
        | 自动验证: #[input(type="text" name="fname1" required="")] #[br]
        input(type="submit" value="提交")
